<template>
  <page class="app-container">
    <el-row>
      <el-col :offset="1" :xs="22" :sm="16" :md="16" :lg="12" :xl="8">
        <el-form :model="form" ref="form" label-width="180px" v-if="!isUpdate || loadedState!== null">
          <el-form-item label="所属门店" prop="shopId" :rules="[{required: true, message: '请选择门店'}]">
            <shop-select v-model="form.shopId" :auto="false"></shop-select>
          </el-form-item>

          <transition name="el-zoom-in-top">
            <el-form-item prop="catId" label="礼品类别" v-if="form.shopId !== null"
                          :rules="[{required: true, message: '请选择礼品分类'}]">
              <gift-type-select v-model="form.catId" :shopId="form.shopId" :auto="false"></gift-type-select>
              <div class="text3 ml10">如没有商品类别，请先添加商品类别</div>
            </el-form-item>
          </transition>

          <el-form-item label="商品名称" prop="title" :rules="[{required: true, message: '请输入商品名称'}]">
            <el-input v-model="form.title"></el-input>
          </el-form-item>

          <el-form-item label="商品图片" prop="image" :rules="[{required: true, message: '请上传商品图片'}]">
            <single-img v-model="form.image"></single-img>
          </el-form-item>

          <el-form-item label="商品描述" prop="des">
            <el-input type="textarea" v-model="form.des"></el-input>
          </el-form-item>

          <el-form-item label="需要积分" prop="origPrice" :rules="[{required: true, message: '请输入需要积分'}]">
            <el-input-number v-model="form.origPrice" controls-position="right"></el-input-number>
          </el-form-item>

          <el-form-item label="库存数量" prop="total" :rules="[{required: true, message: '请输入库存数量'}]">
            <el-input-number v-model="form.total" controls-position="right"></el-input-number>
          </el-form-item>

          <el-form-item label="货物单位" prop="unit" :rules="[{required: true, message: '请输入货物单位'}]">
            <el-input v-model="form.unit"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onSubmit">确定</el-button>
            <el-button @click="$refs.form.resetFields()">重置</el-button>
            <el-button v-back>取消</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </page>
</template>

<script>
  import singleImg from '@/components/Uploadimg/singleImg'
  import {elValidate} from '@/utils/widget'
  import {status_prompt} from '@/utils/feedback'

  export default {
    name: 'giftAdd',
    data() {
      return {
        isUpdate: this.$route.meta.update, // 是否为编辑模式
        loadedState: null, // 表单拉取状态 null:获取中, true:获取成功, false: 获取失败
        form: {
          shopId: null
        }
      }
    },
    computed: {},
    created() {
      if (this.isUpdate) this.get()
    },
    methods: {
      // 添加
      async add() {
        return await status_prompt({
          ajax: () => this.$post_json('admin/commodity/addCommodityById', this.form),
          success_text: '添加成功',
          fail_text: '添加失败'
        })
      },

      //更新
      async update() {
        return await status_prompt({
          ajax: () => this.$post_json('admin/commodity/updateCommodityById', this.form),
          success_text: '修改成功',
          fail_text: '修改失败'
        })
      },

      // 获取详情
      async get() {
        let {obj} = await this.$get_loading('/admin/commodity/getCommodityById', {commodityId: this.$route.params.id}, {loaded: 'loadedState'})
        this.form = obj
      },

      // 提交表单
      async onSubmit() {
        await elValidate(this, 'form')
        await (this.isUpdate ? this.update() : this.add())
        this.$router.back()
      }
    },
    components: {
      singleImg
    }
  }
</script>

<style scoped>

</style>
